import React, { useEffect, useState } from 'react';
import { Modal, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Box, Button, Input, Text, View } from 'native-base';
import Feather from 'react-native-vector-icons/Feather';
import { useBoolean } from 'ahooks';
import { CommonStyle } from '../../../../common/commonStyle.ts';

interface IHomeHeaderProps {
  beeperId: number;
  bgColor: string;
  beeperList: IGetCallListRes[];
  onRefresh: () => void;
  onClick: (id: number) => void;
  onSelected: (id: number) => void;
}
const defaultBeeper: IGetCallListRes = { id: -1, name: '周边', beeperType: 0, beeperVersion: 0, defaultOpen: 0, btnStyle: 0, addressType: 3, showLevel: -1, bgColor: '', btnLineNum: 3, btnModelId: 0, btnVoiceFlag: 1, localeId: 0, mainFlag: 0 };
const HomeHeader: React.FC<IHomeHeaderProps> = (props) => {
  const insets = useSafeAreaInsets();
  const [isModalVisible, { toggle, setTrue, setFalse }] = useBoolean(false);
  const [beeperList, setBeeperList] = useState<IGetCallListRes[]>([]);
  const [list, setList] = useState<IGetCallListRes[]>([]);

  useEffect(() => {
    if (props.beeperList.length > 0) {
      if (props.beeperId && props.beeperId > 0) {
        setList([defaultBeeper, props.beeperList.find((item) => item.id === props.beeperId)!]);
      } else {
        setList([defaultBeeper, props.beeperList[0]]);
      }
    } else {
      setList([defaultBeeper]);
    }
    setBeeperList(props.beeperList);
  }, [props.beeperList, props.beeperId]);

  /**
   * 搜索文字
   * @param text
   */
  const handleChangeText = (text: string) => {
    if (text) {
      const searchTerm = text.toLowerCase();
      setBeeperList(beeperList.filter((item) => item.name.toLowerCase().includes(searchTerm)));
    } else {
      setBeeperList(props.beeperList);
    }
  };

  return (
    <>
      <View style={[styles.header, { paddingTop: insets.top + 12, backgroundColor: props.bgColor }]}>
        <View style={{ flexDirection: 'row' }}>
          {list.map((item, index) => {
            return (
              <Touchable style={[styles.box, { backgroundColor: item.id === props.beeperId ? '#ea622c' : '#fff' }]} key={index} onPress={() => props.onClick(item.id)}>
                <Text color={item.id === props.beeperId ? '#fff' : '#333333'}>{item.name}</Text>
              </Touchable>
            );
          })}
        </View>
        <View style={{ flexDirection: 'row' }}>
          {list.length > 0 && (
            <TouchableOpacity style={styles.searchBox} onPress={setTrue}>
              <MaterialIcons name={'manage-search'} size={24} color={'#ea622c'} />
            </TouchableOpacity>
          )}
          <TouchableOpacity style={[styles.searchBox, { marginRight: 0 }]} onPress={props.onRefresh}>
            <MaterialIcons name={'refresh'} size={24} color={'#333333'} />
          </TouchableOpacity>
        </View>
      </View>

      <Modal visible={isModalVisible} transparent animationType="slide">
        <View style={styles.container}>
          <Touchable
            style={styles.touchArea}
            onPress={() => {
              setFalse();
              setBeeperList(props.beeperList);
            }}
          >
            <View></View>
          </Touchable>
          <View style={styles.pickerContainer}>
            <View style={styles.pickerContent}>
              <Box alignItems="center" paddingX={4}>
                <Input variant="filled" height={8} borderRadius={20} type="text" w="100%" py="0" placeholder="请输入呼叫器昵称/编号/名称" onChangeText={handleChangeText} />
              </Box>
              <ScrollView style={styles.pickerContentBox}>
                {beeperList.map((item, index) => {
                  return (
                    <TouchableOpacity
                      style={styles.row}
                      key={index}
                      onPress={() => {
                        setFalse();
                        props.onSelected(item.id);
                        setBeeperList(props.beeperList);
                      }}
                    >
                      <Text color={props.beeperId === item.id ? CommonStyle.mainColor : CommonStyle.textColor}>{item.name}</Text>
                      {props.beeperId === item.id && <Feather size={22} name={'check-circle'} color={CommonStyle.mainColor} />}
                    </TouchableOpacity>
                  );
                })}
              </ScrollView>
            </View>
          </View>
        </View>
      </Modal>
    </>
  );
};

const styles = StyleSheet.create({
  header: { paddingHorizontal: 8, paddingBottom: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  box: { backgroundColor: '#fff', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 5, marginRight: 8 },
  searchBox: { backgroundColor: '#fff', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 33, height: 33, borderRadius: 50, marginRight: 10 },

  container: { flex: 1, justifyContent: 'flex-end' },
  touchArea: { flex: 1 },
  pickerContainer: { backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 },
  pickerContent: { position: 'relative', height: 450, paddingVertical: 16 },
  pickerContentBox: { flex: 1, marginTop: 10, paddingHorizontal: 16 },
  row: { width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomColor: '#ddd', borderBottomWidth: 1 },
});

export default HomeHeader;
